<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router"

const router = useRouter()
const nickname = ref<string | null>('游客')

const isLogin = ref<string>('登录')

//更新登录的状态
const updataLoginStatus = () => {
    const storeNickname = localStorage.getItem("nickname")
    if (!storeNickname || storeNickname == "游客") {
        isLogin.value = "登录"
        nickname.value = "游客"
    } else {
        isLogin.value = "退出登录"
        nickname.value = storeNickname
    }
}

//加载页面
onMounted(() => {
    updataLoginStatus()
})

//点击登录按钮去登录，点击退出登录
const go = () => {
    if (isLogin.value == "登录") {
        router.push("/login")
    } else {
        localStorage.removeItem("nickname")
        updataLoginStatus()
    }
}
</script>

<template>
  <div id="myInfo">
        <van-image round width="5rem" height="5rem" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
        <div>{{ nickname }}</div>
    </div>
    <van-cell title="编辑收货地址" is-link to="/address" />
    <van-cell title="查看订单" is-link to="/myorder" />
    <van-button type="primary" @click="go" block class="login-btn">{{ isLogin }}</van-button>
</template>

<style scoped>
#myInfo {
    height: 200px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 10px;
	box-sizing: border-box;
    background: linear-gradient(45deg, #4CAF50 0%, #8BC34A 50%, #CDDC39 100%);
}

#myInfo>div {
    margin-left: 5px;
}

.login-btn {
    width: 40%;
    margin: 20px auto;
    background: white;
    border: 1px solid #ebedf0;
    border-radius: 18px;
    color: #323233;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
</style>
